<!DOCTYPE html>
<html>
  <head>
    <title>Hello, data!</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body {
  font: 14px Helvetica Neue;
  text-rendering: optimizeLegibility;
  margin: 1em;
}

#cells {
  position: relative;
  margin-top: .5em;
  height: 300px;
  overflow: hidden;
}

.cell {
  position: absolute;
  background: steelblue;
  color: white;
  width: 28px;
  text-align: center;
  padding-top: 6px;
  top: 300px;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(steelblue));
  -webkit-transition-property: top, background-color;
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease, linear;
}

    </style>
  </head>
  <body>
    Your lucky numbers are:<br>
    <div id="cells"></div>
    <script type="text/javascript">

var n = 10;

d3.select("#cells")
  .selectAll("div")
    .data(d3.range(n))
  .enter().append("div")
    .attr("class", "cell")
    .style("left", function(i) { return i * 30; });

function transform() {
  d3.selectAll(".cell")
      .data(d3.range(n).map(Math.random))
      .style("top", function(d) { return (1 - d) * 300; })
      .style("background-color", function(d) { return "rgb(" + ~~(d * 255) + ",50,100)"; })
      .text(function(d) { return ~~(d * 100); });
}

window.addEventListener("keypress", transform, false);

    </script>
  </body>
</html>
